<template>
    <div class="change">
        <hb-title-levels :list="paths" />
        <hb-box class="mar"  v-bind:title='Lang.title[lang][1]' >
            <form class="form">
				<h6 class="label" v-text="Lang.title[lang][2]">
                    新交易密码
                </h6>
				<hb-signupPassword @ipt="e_re" formType="password" back="newPassword" />
				<h6 class="label" v-text="Lang.title[lang][3]">
					 重复新密码
				</h6>
				<hb-signupPassword @ipt="e_re" formType="password" back="newPassword_re" />
				

                <h6 class="label" v-text="Lang.title[lang][4]">
                    人机验证码
                </h6>
                <div class="fcb">
                    <hb-input class="imgcode"
                        @ipt="e_re"
                        formType="imgCode"
                        back="imgCode" />
                    <img class="img"
                        :src="imgCode"
                        @click="api_getimg">
                </div>

                <h6 class="label" v-text="Lang.title[lang][5]">
                    手机验证码
                </h6>
                <hb-vercode @ipt="e_re"
                    formType="vercode"
                    back="vercode"
                    @clk="e_send" />

                <hb-button class="btn" v-bind:txt="Lang.msg[lang][5]" @clk="e_change" />
            </form>
        </hb-box>
        <hb-dialog v-if="msgback !== ''" @clk="e_closeDialog" class="dialog">
            <h3 class="hmsg" v-text="msgback"></h3>
        </hb-dialog>
    </div>
</template>

<script>
import {vpost, vlink} from '@api'
import Lang from './lang.js'
export default {
	name: 'change',
	data() {
		return {
			Lang,
			//paths: [{txt: '账号安全', path: 'safe'}, {txt: '设置交易密码', path: 'change'}],
			msgback: '',
			imgCode: '',

			form: {
				password: null,
				vercode: null,
				newPassword: null,
				newPassword_re: null,
			},

			checkRe: {
				newPassword_re: false,
				newPassword: false,
				password: false,
				vercode: false,
			},
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		paths() {
			return [{txt: Lang.title[this.lang][0], path: 'safe'}, {txt: Lang.title[this.lang][1], path: 'change'}]
		},
	},
	created() {
		this.FBtypeid = this.$route.params.FBtypeid
	},
	mounted() {
		this.api_getimg()
	},
	methods: {
		e_back_() {
			this.$router.push('/safe')
		},
		// 获取图片验证码
		api_getimg() {
			this.imgCode = ''
			setTimeout(() => {
				let r = (Math.random() * 100) | 0
				this.imgCode = vlink.checkCode.signup.img + r
			}, 10)
		},
		// 获取表单输入内容
		e_re(re, inputed, back) {
			this.checkRe[back] = re
			this.form[back] = inputed
		},
		// 关闭提示框
		e_closeDialog() {
			this.msgback = ''
			this.clearCodeTimer = Math.random() * 2
		},
		closeMsg() {
			setTimeout(() => {
				this.msgback = ''
			}, 1300)
		},
		e_send() {
			// 不需要了
			if (!this.checkRe.imgCode) {
				this.msgback = this.Lang.msg[this.lang][0]
				this.closeMsg()
				return false
			}
			let smsdata = {
				type: 7,
				phone: sessionStorage.getItem('name'),
				vcode: this.form.imgCode,
			}
			vpost(vlink.checkCode.signup.phone, smsdata).then(re => {
				if (re.code == 0) {
					this.msgback = this.Lang.msg[this.lang][1]
					this.closeMsg()
				} else {
					this.msgback = re.msg
				}
			})
		},
		// 最后的验证
		check(callback) {
			let changedata = {
				pwdType: 1,
				newPwd: this.form.newPassword,
				reNewPwd: this.form.newPassword_re,
				phoneCode: this.form.vercode,
			}

			if (changedata.newPwd == null || changedata.newPwd == '') {
				this.msgback = this.Lang.msg[this.lang][2]
				this.closeMsg()
				return false
			}
			if (changedata.reNewPwd == null || changedata.reNewPwd == '') {
				this.msgback = this.Lang.msg[this.lang][3]
				this.closeMsg()
				return false
			}
			if (changedata.phoneCode == null || changedata.phoneCode == '') {
				this.msgback = this.Lang.msg[this.lang][4]
				this.closeMsg()
				return false
			}
			callback(changedata)
		},
		e_change() {
			this.check(changedata => {
				//await
				vpost(vlink.user.tradePassword, changedata).then(re => {
					this.msgback = re.msg
					setTimeout(() => {
						this.closeMsg()
						if (re.status == 1) {
							this.$router.push('/safe')
						}
					}, 1200)
				})
			})
		},
	},
}
</script>

<style scoped>
.mar {
	margin: 20px 0;
	overflow: hidden;
}
.form {
	margin: 40px auto;
	width: 600px;
}
.label {
	margin: 10px 0;
	font-weight: 400;
	font-size: 14px;
	color: #61688a;
}
.btn {
	display: block;
	margin: 20px auto;
}
.dialog {
	color: var(--clr0);
}
.hmsg {
	padding: 0 20px;
}
.imgcode {
	width: 75%;
}
.img {
	border-radius: 4px;
	height: 48px;
}
</style>